'use client';

import { useTranslations } from 'next-intl';
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
import { useState } from 'react';

export default function Home() {
  const t = useTranslations();
  const [count, setCount] = useState(0);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-8 transition-colors duration-300">
      <div className="max-w-4xl mx-auto space-y-8">
        {/* 头部 */}
        <div className="text-center space-y-4">
          <h1 className="text-5xl font-bold bg-background">
            {t('common.welcome')}
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-300">
            {t('common.description')}
          </p>
        </div>

        {/* 语言切换器 */}
        <LanguageSwitcher />

        {/* 功能演示卡片 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-8 space-y-6 transition-colors">
          <h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100 border-b dark:border-gray-700 pb-4">
            {t('demo.title')}
          </h2>

          <ul className="space-y-3">
            <li className="text-lg text-gray-700 dark:text-gray-300 flex items-center gap-2">
              <span>{t('demo.feature1')}</span>
            </li>
            <li className="text-lg text-gray-700 dark:text-gray-300 flex items-center gap-2">
              <span>{t('demo.feature2')}</span>
            </li>
            <li className="text-lg text-gray-700 dark:text-gray-300 flex items-center gap-2">
              <span>{t('demo.feature3')}</span>
            </li>
          </ul>

          {/* 计数器示例 */}
          <div className="mt-8 p-6 bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 rounded-lg border-2 border-green-200 dark:border-green-700">
            <h3 className="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
              {t('demo.counter')}
            </h3>
            <div className="flex items-center gap-4">
              <button
                onClick={() => setCount(count + 1)}
                className="px-6 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-medium rounded-lg shadow-md transition-all transform hover:scale-105"
              >
                {t('demo.increment')}
              </button>
              <p className="text-xl font-medium text-gray-700 dark:text-gray-300">
                {t('demo.currentCount', { count })}
              </p>
            </div>
          </div>
        </div>

        {/* 代码示例 */}
        <div className="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-xl p-6 text-white border border-gray-700">
          <h3 className="text-xl font-bold mb-4">💡 核心代码</h3>
          <pre className="text-sm overflow-x-auto text-gray-100">
            {`// 1. 使用 useTranslations 获取翻译
const t = useTranslations();

// 2. 使用翻译（支持参数）
t('demo.currentCount', { count })

// 3. 切换语言（不刷新页面）
const { locale, setLocale } = useLocale();
setLocale('zh'); // 或 'en'

// 4. 切换主题（不刷新页面）
const { theme, toggleTheme } = useTheme();
toggleTheme();`}
          </pre>
        </div>

        {/* 页脚 */}
        <footer className="text-center space-y-2 pt-8 border-t dark:border-gray-700">
          <p className="text-gray-600 dark:text-gray-400">
            {t('footer.madeWith')}
          </p>
          <p className="text-gray-500 dark:text-gray-500 text-sm">
            {t('footer.author')}
          </p>
        </footer>
      </div>
    </div>
  );
}
